<template>
	<view class="x-wrapper">
		<view class="x-main-content">
			<view class="order-box">
				<u-navbar title="订单列表" bgColor="#ffffff" :fixed="true" leftIconColor="#333" leftIconSize="42rpx"
					placeholder :autoBack="true">
				</u-navbar>
				<view class="navs-box">
					<u-tabs :list="tabs" keyName="label" lineColor="#386FFF" lineWidth="34rpx" lineHeight="6rpx"
						:inactiveStyle="searchInactiveStyle" :activeStyle="searchActiveStyle"
						:itemStyle="searchTabItemStyle" :current="current" :scrollable="false" @click="tabsClick"
						ref="tabs">
					</u-tabs>
				</view>
				<view class="order-list-out">
					<view class="order-list">
						<view class="order-item" v-for="(item, index) of showList" :key="index">
							<view class="order-top">
								<view>
									订单号：{{item.serviceOrderSn}}
								</view>
								<view>
									<text class="zhuangtai">{{orderType(item)}}</text>
								</view>
							</view>
							<view class="order-mid">
								<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
									<view class="treat-info">
										<view class="avatar">
											<!-- <image :src="item.serviceImage"></image> -->
											<image src="https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F18545113382750556.jpg"></image>
										</view>
										<view class="info">
											<text
												class="people"><text>{{item.serviceName||item.contactName}}</text></text>
											<view class="phone"
												style="display: flex;align-items: center;margin-bottom: 10rpx;"
												v-if="item.contactPhone">
												<img src="@/static/icon/phone.png"
													style="width: 40rpx;height: 40rpx;margin-right: 8rpx;" />
												<text>{{item.phone||item.contactPhone}}</text>
											</view>
											<view class="area" style="display: flex;align-items: center;">
												<img src="@/static/icon/address.png"
													style="width: 40rpx;height: 40rpx;margin-right: 8rpx;" />
												<text>{{item.address?item.address:"" }}</text>
											</view>
										</view>
									</view>
									<view style="font-size: 26rpx;">
										<view class="area">
											<span style="font-size: 20rpx;">¥</span>
											<text>{{item.amount||item.price}}</text>
										</view>
									</view>
								</view>
								<view style="display: flex;align-items: center;justify-content: space-between;">
									<view class="hospital">
										<img src="@/static/icon/hospital.png" />
										<view>
											{{item.hospitalName||item.hospital}}
										</view>
									</view>
									<view class="time">
										<img src="@/static/icon/time_on.png" />
										<view>
											{{item.appointmentDate}}
										</view>
									</view>
								</view>
								<view
									style="display: flex;	justify-content:flex-end;margin-top: 10rpx;align-items: baseline;margin-bottom: 10rpx;">
									<view style="color:#878787;font-size: 26rpx;">
										合计：
									</view>
									<view style="color: #eb545a;">
										<span>¥</span>
										<span
											style="font-size: 36rpx;font-weight: 800">{{item.amount||item.price}}</span>

									</view>
								</view>
							</view>
							<view class="order-end">
								<view @click="goDetail(item)">查看详情</view>
								<template v-if="isShowPq(item)">
									<view @click="goDispatch(item)">去派遣</view>
								</template>
								<template v-if="isShowOr(item)">
									<view @click="goOrdered(item,'order')">去接单</view>
								</template>
								<template v-if="isShowFw(item)">
									<view @click="goOrdered(item,'hasd')">已服务</view>
								</template>
								<template v-if="item.orderStatus==2">
									<view @click="goPay(item)">去支付</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		throttle
	} from 'lodash';
	const phoneNumber = uni.getStorageSync('userInfo').phonenumber
	const whiteList = ['18662621080','13040944773','13616209574']
	export default {
		components: {},
		data() {
			return {
				current: 0,
				tabs: [{
						label: '全部',
						value: 0
					},
					{
						label: '服务中',
						value: 4
					},
					{
						label: '已完成',
						value: 5
					},
					{
						label: '已取消',
						value: 6
					}
				],
				list: [],
				params: {
					keyword: '',
					orderStatus: '',
					userId: '',
					pageNum: 1,
					pageSize: 20
				},
				showList: [],
				currentNav: '',
				myOrderList: [],
				userType: '',
				userWindow: '',
			}
		},

		onLoad(e) {
			if (e.label == 1 || e.label == 2) {
				this.current = 1
			} else {
				let index = this.tabs.findIndex(i => {
					return i.value == e.label
				})
				this.current = index
			}
			//订单状态
			this.currentNav = e
			uni.$on('reFrash',()=>{
				this.getOutOrder()
			})
		},
		onShow() {
			if (this.current == 7) {
				this.getOutOrder()
			}
		},
		onHide(){
			// uni.$off('reFrash')
		},
		created() {
			this.userWindow = uni.getStorageSync('userWindow')
			if (this.userWindow !== '001') {
				let item = {
					label: '待服务',
					value: 1
				}
				this.tabs.splice(1, 0, item)
			} else {
				let item = {
					label: '待支付',
					value: 2
				}
				this.tabs.splice(1, 0, item)
			}
			this.userType = uni.getStorageSync('userType')
			if (whiteList.indexOf(phoneNumber)>-1) {
				this.tabs.push({
					label: '山东订单',
					value: 7
				},{
					label: '陪订单',
					value: 3
				})
			}
			this.$nextTick(() => {
				this.getOrderList()
			})
		},
		methods: {
			isShowPq(item){
				let flag = whiteList.indexOf(phoneNumber)>-1 && item.orderStatus==1
				if(flag){
					return true
				}
				return false
			},
			isShowOr(item){
				let flag = whiteList.indexOf(phoneNumber)>-1 && item.orderStatus==3
				if(flag){
					return true
				}
				return false
			},
			isShowFw(item){
				let flag = item.orderStatus==4
				if(flag){
					return true
				}
				return false
			},
			goOrdered(item,type){
				uni.showModal({
					title: '提示',
					content: type == 'hasd' ? '请确认是否已服务' : '请确认是否需要去接单？',
					success: async (res) => {
						if (res.confirm) {
							const data = {
								id: item.id
							}
							let url =  type == 'hasd' ? '/api/serviceOrder/completeOrder' : '/api/serviceOrder/receiveOrder'
							let result = await this.$request(url, data, 'POST')
							console.log(result)
							if(result.data.code !== 200){
								this.$u.toast(result.data.msg)
								return
							}
							this.$u.toast('提交成功')
							let status = type == 'hasd' ? 4 : 3
							this.changeTabs({value:status})
						}
						if (res.cancel) {}
					}
				})
			},
			async goPay(item){
				uni.showLoading({
					title: "请求中..."
				})
				let _this = this
				let params ={}
				let resVal = await this.$request(`/api/Order/appletPaySign/${item.serviceOrderSn}`, params, 'get')
				console.log('resVal',resVal)
				uni.hideLoading();
				if(resVal.data.code == 200){
					let resData = resVal.data.data
					wx.requestPayment({
						timeStamp: resData.timeStamp,
						nonceStr: resData.nonceStr,
						package: 'prepay_id=' + resData.prepay_id,
						signType: 'MD5',
						paySign: resData.paySign,
						success (res) {
							_this.$u.toast('支付成功')
							_this.getOrderList()
						},
						fail (res) {
							_this.$u.toast('支付失败')
							console.log('failres',res)
						}
					})
				}
			},
			tabsClick: throttle(function(e) {
			    console.log('e',e)
				this.current = e.search
				//管理员分配订单界面
				if (e.value == 7) {
					this.getOutOrder()
				} else {
					this.changeTabs(e)
				}
			}, 500),
			goDetail(ctx) {
				uni.navigateTo({
					url: '/packageA/pages/order/orderDetail?data=' + ctx.id,
				})
				// uni.navigateTo({
				// 	url: '/packageA/pages/order/orderDetail?data=' + encodeURIComponent(JSON.stringify(ctx)),
				// })
			},
			async getOrderList() {
				let orderStatus = ''
				if (this.currentNav.label && this.currentNav.label !== 0) {
					orderStatus = this.currentNav.label
				} else {
					return
				}
				orderStatus = orderStatus == 0 ? '' : orderStatus
				const ret = await this.getOrderData(orderStatus)
				this.showList = ret.data.rows
			},
			async getOrderData(code) {
				const data = {
					userId: uni.getStorageSync('userId'),
					orderStatus: code,
					userType: uni.getStorageSync('userType')
				}
				let res = await this.$request('/api/serviceOrder/getServiceOrderList', data, 'GET')
				return res
			},
			async getOutOrder() {
				let res = await this.$request('/api/externalOrder/externalOrderList', '', 'GET')
				this.showList = res.data.data.reverse()
			},
			goDispatch(ctx) {
				uni.navigateTo({
					url: '/pages/business/components/dispatch?data=' + encodeURIComponent(JSON.stringify(ctx)),
				})
			},
			async changeTabs(e) {
				let orderStatus = e.value == 0 ? '' : e.value
				const ret = await this.getOrderData(orderStatus)
				this.showList = ret.data.rows
			},
			orderType(order) {
				if (this.current == 5) {
					if (order.orderStatus == 1) {
						return '待接单'
					} else if (order.orderStatus == 2) {
						return '已接单'
					} else if (order.orderStatus == 3) {
						return '已评价'
					} else if (order.orderStatus) {
						return '已取消'
					}
				} else {
					if (order.orderStatus == 1) {
						return '待服务'
					} else if (order.orderStatus == 2) {
						return '待支付'
					} else if (order.orderStatus == 3) {
						return '待接单'
					} else if (order.orderStatus == 4) {
						return '服务中'
					} else if (order.orderStatus == 5) {
						return '已完成'
					} else if (order.orderStatus == 6) {
						return '已取消'
					}
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.navs-box {
		padding: 10rpx 0;
		background: #fff;
		position: fixed;
		width: 100%;
		z-index: 10;
	}

	.order-list-out {
		padding: 0 40rpx 20rpx 40rpx;
	}

	.order-list {

		margin-top: 110rpx;

		.order-item {
			margin-top: 10px;
			border-radius: 20rpx;
			flex-direction: column;
			display: flex;
			background: #fff;
			padding: 20rpx;

			image {
				width: 100rpx;
				height: 100rpx;

			}


			.order-top {
				display: flex;
				margin-bottom: 10rpx;
				position: relative;
				font-size: 12px;
				color: #878787;
				justify-content: space-between;
			}

			.order-top::after {
				position: absolute;
				content: '';
				width: 100%;
				bottom: -10rpx;
				height: 0;
				left: 0;
				border-bottom: 1px solid #dadada;
			}

			.order-mid {
				display: flex;
				padding-top: 20rpx;
				flex-direction: column;

				.hospital {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					color: #3d3d3d;
					height: 40rpx;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;

					img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.treat-info {
					display: flex;


					image {
						width: 160rpx;
						height: 160rpx;
					}

					.info {
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
						font-size: 26rpx;

						phone {
							display: flex;
							align-items: center;
						}

					}
				}

				.time {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					color: #3d3d3d;
					height: 40rpx;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;

					img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

				}

				.people {
					font-size: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #3d3d3d;
					font-weight: bolder;
					margin-bottom: 10rpx;
				}
			}

			.order-end {
				position: relative;
				display: flex;
				justify-content: flex-end;
				padding-top: 20rpx;
				font-size: 26rpx;

				view {
					border: 1px solid #3e67f5;
					padding: 10rpx 0;
					width: 150rpx;
					border-radius: 40rpx;
					text-align: center;
					margin-left: 20rpx;
					color: #3e67f5;
				}

				view:last-child {
					background-color: #3e67f5;
					color: white;

					;
				}

				.zhuangtai {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF7630;
					letter-spacing: 1px;
				}
			}

			.order-end::after {
				position: absolute;
				content: '';
				width: 100%;
				top: 0;
				height: 0;
				border-bottom: 1px solid #dadada;
			}
		}
	}

	/deep/.u-navbar__content__left {
		display: none;
	}
</style>